<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用栅格系统钉钉导航条布局</title>

        <!-- 使用 link 链接外部样式，必须指定 rel 为 stylesheet  ，使用 href 指定样式文件名称 -->
        <link rel="stylesheet" href="cells.css" >

        <!-- 在 style 元素内部指定当前页面上所特有的样式 -->
        <style type="text/css">
            body { margin : 0 ;  padding: 0 ; }
            .wrapper { width: 80% ; margin: 25px auto ;  }
            .odd { height: 50px ; background-color: #efefef; }
            .even { height: 50px ; background-color: #fffdab; }

            /* 选择那些 class 属性中 既包含 row 同时又包含 wrapper 的元素 */
            .row.wrapper { border: 1px solid green ;  }
            /* 注意在 .row 和 .wrapper 之间没有任何其他符号，也没有空白 */
        </style>
    </head>
    <body>

        <!-- div.row.wrapper>div[class]*3 -->
        <div class="row wrapper">
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-8 even"></div>
            <div class="cells-12-3 odd"></div>
        </div>

        <div class="row ">
            <div class="cells-12-1 odd"></div>
            <div class="cells-12-8 even"></div>
            <div class="cells-12-3 odd"></div>
        </div>

    </body>
</html>